import { ref, reactive, watch } from "vue"
import { getAtlasData } from "../../service/article"
import { formatArray } from "../../utils/formatArr"

export const useAtlasHook = () => {
  const detailInfo = reactive<any>({
    id: "",
    type: "",
    title: ""
  })

  const url = new URL(location.href);
  const searchParams = url.searchParams;

  //监听路由query变化
  watch(
    () => searchParams,
    (newVal) => {
      detailInfo.id = newVal.get("id");
      detailInfo.type = newVal.get("type");
      switch (newVal.get("type")) {
        case "1":
          detailInfo.title = "所属图谱"
          break;
        case "1":
          detailInfo.title = "关联图谱"
          break;
        case "1":
          detailInfo.title = "管理图谱"
          break;
        case "4":
          detailInfo.title = "演变图谱"
          break;

      }
    },
    { deep: true, immediate: true }
  );

  const atlasData = ref<any>()
  const searchType = ref("2")


  // 初始化页面数据
  const evolveData = ref<any[]>([])
  const init = async () => {
    type ApiNameType = "getParentPolicy" | "findPolicyRel" | "findPolicyManageRel" | "findPolicyEvolutionRel" | "getParentOrgTree" | "findOrgPolicy"
    type PathType = "/org/org" | "/article/article_policy"
    let apiName: ApiNameType = "getParentPolicy"
    let path: PathType = "/article/article_policy";
    let atlasTitle = ""
    switch (detailInfo.type) {
      case "1":
        apiName = "getParentPolicy"
        atlasTitle = "所属图谱"
        break;
      case "2":
        apiName = "findPolicyRel"
        atlasTitle = "关联图谱"
        break;
      case "3":
        apiName = "findPolicyManageRel"
        atlasTitle = "管理图谱"
        break;
      case "4":
        apiName = "findPolicyEvolutionRel"
        atlasTitle = "演变图谱"
        break;
      // 所属部门
      case "5":
        apiName = "getParentOrgTree";
        atlasTitle = "所属部门";
        path = "/org/org";
        searchType.value = "3";
        break;
      // 主管政策
      case "6":
        apiName = "findOrgPolicy";
        atlasTitle = "主管政策";
        path = "/org/org";
        searchType.value = "3";
        break;
    }

    detailInfo.title = atlasTitle

    // 请求数据
    const result = await getAtlasData({ [detailInfo.type == 5 || detailInfo.type == 6 ? 'orgId' : 'policyId']: detailInfo.id }, apiName, path)

    // 构造演变图谱数据
    evolveData.value = formatArray(result.data)

    if (detailInfo.type == "1" || detailInfo.type == "3" || detailInfo.type == "5") {
      console.log({id: "0", label: atlasTitle, children: [...result.data] })
      console.log(result.data)
      atlasData.value = result.data[0];

    } else if (detailInfo.type == "4") {
      atlasData.value = result.data
    } else if (detailInfo.type == "2" || detailInfo.type == "6") {
      let pid = ""
      let pname = ""
      const arr = result.data[0].children?.length ? [result.data[0], ...result.data[0].children] : [result.data[0]]
      const relevanceData = arr.map((item: any) => {
        const strArr = []
        for (let i = 0; i < item.label.length; i += 8) {
          const chunk = item.label.substring(i, i + 8);
          strArr.push(chunk);
        }
        item.label = strArr.join("\n")

        if (item.children?.length) {
          pid = item.id
          pname = item.label
          return {
            id: item.id,
            name: item.label,
            pid: 0,
            pname: '',
            relation: '',
            category: 0
          }
        } else {
          return {
            id: item.id,
            name: item.label,
            pid,
            pname,
            relation: '关联',
            category: 1,
          }

        }
      })
      atlasData.value = relevanceData
    }
  }


  init()

  // 跳转方法
  const goDetailPage = (id: string, searchType: any) => {
    window.open(`${location.origin}/detail?id=${id}&searchType=${searchType}`, "_blank")
  }

  return { detailInfo, atlasData, evolveData, goDetailPage, searchType }
}
